<template>
    <div v-if = "props.visible" class="modal-overlay" @click="closeModal" >
        <div class="modal-content" @click.stop>
            <div class="rounded-rectangle">
                <div class="rounded-rectangle">
                    <div class="leftrounded" >
                        <el-carousel :interval="0" :autoplay="false"  arrow="always" height="100%" >
                            <el-carousel-item v-for= "(image,index) in imageUrls" :key="index">
                                <img :src="image" alt="image" class="carousel-image" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="rightrounded">
                        <p class="left-aligned-text">用户申请领养理由</p>
                        <div class="inner-rounded-rectangle">
                            <el-scrollbar class="full-size-scrollbar">
                                <p class="custom-text-style">{{ text }}</p>
                            </el-scrollbar>
                        </div>
                        <div class="mb-4 button-container">
                            <el-button v-if="!disabled" type="warning" color="#FFD466" class="large-button" @click="sayyes">同意</el-button>
                            <el-button v-if="disabled" type="warning" color="#FFD466" class="large-button" disabled>同意</el-button>
                            <el-button v-if="!disabled" type="info"  class="large-button " @click="sayno">拒绝</el-button>
                            <el-button v-if="disabled" type="info"  class="large-button " disabled>拒绝</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineEmits } from 'vue';
// 接收父组件传递的属性
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
const props = ({
    visible : {
        type :  Boolean,
        default : false
    }
});
const imageUrls = ref([]);
const text = ref('');
const userData = JSON.parse(sessionStorage.getItem('token'));
const disabled = ref(false);
// const userID = userData.userID;
// 设置axios的默认请求头，用于后续请求携带token
const userData0 = JSON.parse(sessionStorage.getItem('adoptCheck'));
// 设置axios的默认请求头，用于后续请求携带token
axios.defaults.headers.common['Authorization'] = `${userData.token}`;
onMounted(async ()=>{
    const response1 = await axios.get(`http://localhost:8080/adopt/application/getapplication/`+ userData0.adoptID,{});
    text.value = response1.data.Reason;   //删掉从父组件传来的text
    console.log(response1.data);
    const response = await axios.get(`http://localhost:8080/passage/pic/${userData0.PassageID}`);
    if (response.status == 200) {
        console.log(response.data);
        imageUrls.value = response.data;
    } else {
        console.log("error");
    }
    const response2 = await axios.get(`http://localhost:8080/adopt/application/getadoptprogress/`+ userData0.adoptID,{});
    console.log(response2.data.process);
    if (response2.data.process !== -1 && response2.data.process !== 0 && response2.data.process !== 1){
        ElMessage({
            message: '该用户的领养申请已被同意',
            type: 'success',
            style: 'font-size:25px;font-weight:bold;',
            offset: 55,
            grouping:true
        })
        disabled.value = true;
    }
    if (response2.data.process == -1){
        ElMessage({
            message: '该用户的领养申请已被拒绝',
            type: 'success',
            style: 'font-size:25px;font-weight:bold;',
            offset: 55,
            grouping:true
        })
        disabled.value = true;
    }
})

const sayyes = async () => {
    try{
        const response =  await axios.post(`http://localhost:8080/adopt/application/updateprogress`, {
            adopt_id: userData0.adoptID,
            adopt_process: 3,
        });
        const result = response.data;
        console.log(result);
        if (response.status === 200){
                // 可以根据需要添加更多逻辑，比如刷新页面数据、更新相关状态等
                    ElMessage({
                        message: '已同意该用户的领养申请',
                        type: 'success',
                        style: 'font-size:25px;font-weight:bold;',
                        offset: 55,
                        grouping:true
                    })
            emit('hasconfirm', true);
            closeModal();
        }
    }catch (error){
        alert('网络错误，请稍后再试');
        console.log("error");
    }
};
const sayno = async () => {
    try{
        const response =  await axios.post(`http://localhost:8080/adopt/application/updateprogress`, {
            adopt_id: userData0.adoptID,
            adopt_process: -1,
        });
        if (response.status === 200) {
            // 可以根据需要添加更多逻辑，比如刷新页面数据、更新相关状态等
            ElMessage({
                message: '已拒绝该用户的领养申请',
                type: 'success',
                style: 'font-size:25px;font-weight:bold;',
                offset: 55,
                grouping: true
            })
            emit('hasconfirm', true);
            closeModal();
        }
    }catch (error){
        alert('网络错误，请稍后再试');
        console.log("error");
    }
};

// 定义关闭模态框的方法并向父组件发送关闭事件
const closeModal = () => {
    emit('close');
    props.visible.value = false;
};
// 定义 emits
const emit = defineEmits(['close','hasconfirm']);

</script>

<style scoped>

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 98%;
    height: 98%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 70%; /* 设置宽度为页面的60% */
    height: 80%; /* 设置高度为页面的80% */
    overflow: auto;
}

.rounded-rectangle {
    border-radius: 20px; /* 圆弧长方形 */
    text-align: center;
    width: 100%; /* 设置宽度为页面的80% */
    height: 100%; /* 设置高度为页面的80% */
    display: flex; /* 使用 Flexbox 布局 */
    position: relative; /* 相对定位，用于绝对定位关闭按钮 */
    justify-content: space-between; /* 左右两部分之间留有空间 */
}

.leftrounded, .rightrounded {
    flex: 1; /* 左右两部分各占一半宽度 */
    width: 98%; /* 设置宽度为页面的100% */
    height: 98%; /* 设置高度为页面的100% */
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例并填充容器 */
}
.el-carousel {
    width: 100%;
    height: 100%;
}
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
}
.rightrounded {
    /*background: #f8f6f6; !* 右边部分的背景颜色 *!*/
    border-radius: 20px; /* 圆弧长方形 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px; /* 添加内边距 */
}

.left-aligned-text {
    text-align: left; /* 靠左对齐 */
    margin-left: 10px;
    font-size: 1.5em; /* 字体变大 */
    margin-bottom: 20px; /* 添加底部间距 */
}

.inner-rounded-rectangle {
    border: 1px solid #e5e5e5; /* 右边部分的边框 */
    border-radius: 10px; /* 圆弧长方形 */
    padding: 10px; /* 添加内边距 */
    background: #ffffff;
    width: 92%; /* 设置宽度为页面的90% */
    height: 77%; /* 设置高度为页面的90% */
    margin:auto;
    overflow: hidden; /* 隐藏溢出内容 */
}

.button-container {
    display: flex;
    justify-content: flex-end; /* 按钮靠右 */
    margin-top: 10px; /* 增加上方的间距 */
}

.large-button {
    padding: 18px 20px; /* 增加按钮的内边距 */
    font-size: 16px; /* 放大按钮 */
    width:75px;
    border-radius: 10px;
    color:white;
    height:35px;
    font-weight:bold;
}

.full-size-scrollbar {
    height: 100%; /* 设置高度为100% */
}

.custom-text-style {
    font-family: Arial, sans-serif; /* 你可以替换成你想要的字体，这里以Arial为例 */
    text-align: left; /* 设置文本左对齐，使其不居中，你也可以根据需要设置为right等其他对齐方式 */
}

</style>
